<nz-modal [(nzVisible)]="visible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="submitForm()"
  [nzOkLoading]="isOkLoading" nzWidth="5.55rem" nzWrapClassName="vertical-center-modal" nzMask="false"
  nzOkDisabled="false" [nzStyle]="{ top: '2.4rem' }" [nzOkText]='null' [nzCancelText]='null' [nzFooter]="addFooter" >
  <form [formGroup]="userInfoForm">

    <div class="title">
      <i class="add-user-dot"></i>
      {{'UserManagement.ManageOrganization.' + title | translate}}
    </div>
    
    <div class="hrs"></div>
    <div class="details" style="padding: 12px;">
      <!-- <nz-form-item style="margin-top:0.5rem;" class="id">
        <nz-form-label [nzSm]="8" [nzXs]="24" nzRequired>
          {{'UserManagement.ManageOrganization.Organization_ID' | translate}}</nz-form-label>
        <nz-form-control [nzSm]="15" [nzXs]="24">
          <p id="userId">asdasd</p>
        </nz-form-control>
      </nz-form-item> -->
      <nz-form-item style="margin-top:0.05rem;" class="name">
        <nz-form-label nzRequired >
          {{'UserManagement.ManageOrganization.Name' | translate}}</nz-form-label>
        <nz-form-control>
          <input nz-input [placeholder]="'' | translate" formControlName="organization_Name"  style="font-size: 14px;background-color: #2c3159; border: 2px solid #6d72a7; color: #A2AACA;" />
          <nz-form-explain
            *ngIf="userInfoForm.get('organization_Name')?.dirty && userInfoForm.get('organization_Name')?.errors">
            {{'UserManagement.ManageOrganization.MandatoryWarning' | translate}}
          </nz-form-explain>
        </nz-form-control>
      </nz-form-item>
    </div>
  </form>

  <ng-template #addFooter>
    <div>
      <button (click)="handleCancel()" nz-button nzType="default">{{'UserManagement.ManageOrganization.Cancel' |
        translate}}</button>
      <button (click)="submitForm()" nz-button nzType="primary">{{'UserManagement.ManageOrganization.Save' |
        translate}}</button>
    </div>
  </ng-template>
</nz-modal>